<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import router from "@/router";
//解决菜单选中项的高亮与显示页面不一致的问题
let activePath = '/home/customer'; // 当前默认激活客户管理界面
const setActivePath = () => { // 获取当前菜单激活路径
  activePath = router.currentRoute._value.fullPath;
}
setActivePath();
</script>
<template>
  <el-container style="height: 100%">
    <el-header style="display: flex">
      <el-breadcrumb :separator-icon="ArrowRight" style="display: flex;align-content: center;">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <el-container style="width: 100%; height: 100%">
        <el-aside>
          <el-menu mode="vertical" :default-active="activePath" router>
            <el-sub-menu index="">
              <template #title>我的</template>
              <el-menu-item-group>
                <el-menu-item index="/myMessage" @click="setActivePath">基本信息</el-menu-item>
                <el-menu-item index="/address" @click="setActivePath">收货地址</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>


